<template>
  <div id="classify">
    <div class="iconList">
      <div @click="goPodcastView(0)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-019"></use>
        </svg>
        <div>{{ headline[0] }}</div>
      </div>

      <div @click="goPodcastView(1)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-yinleshu"></use>
        </svg>
        <div>{{ headline[1] }}</div>
      </div>

      <div @click="goPodcastView(2)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-aixin2"></use>
        </svg>
        <div>{{ headline[2] }}</div>
      </div>

      <div @click="goPodcastView(3)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-sheyingshipin-fill"></use>
        </svg>
        <div>{{ headline[3] }}</div>
      </div>
    </div>

    <div class="iconList">
      <div @click="goPodcastView(4)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-tuokouxiu"></use>
        </svg>
        <div>{{ headline[4] }}</div>
      </div>

      <div @click="goPodcastView(5)">
        <svg class="icon" aria-hidden="true">
          <use
            xlink:href="#bobamusic-chat-communication-office-bubble-talk-business-aadbde"
          ></use>
        </svg>
        <div>{{ headline[5] }}</div>
      </div>

      <div @click="goPodcastView(6)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-microphone"></use>
        </svg>
        <div>{{ headline[6] }}</div>
      </div>

      <div @click="goPodcastView(7)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-agora_-dianyin"></use>
        </svg>
        <div>{{ headline[7] }}</div>
      </div>
    </div>

    <div class="iconList" style="margin-bottom: 30px">
      <div @click="goPodcastView(8)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-xiuxi"></use>
        </svg>
        <div>{{ headline[8] }}</div>
      </div>

      <div @click="goPodcastView(9)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-yonghu"></use>
        </svg>
        <div>{{ headline[9] }}</div>
      </div>

      <div @click="goPodcastView(10)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-lingdang"></use>
        </svg>
        <div>{{ headline[10] }}</div>
      </div>

      <div @click="goPodcastView(11)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#bobamusic-qita"></use>
        </svg>
        <div>{{ headline[11] }}</div>
      </div>
    </div>

    <playlists
      class="playList"
      :playlistsRows="playlistsRows"
      :playList="item"
      v-for="(item, index) in playList"
      :key="index"
    ></playlists>
  </div>
</template>

<script>
// 这是分类页面
import { getRecommendMv, getNewestMV } from "../../network/api/VideoApi";
import playlists from "../video/playlists";
export default {
  components: {
    playlists,
  },
  data() {
    return {
      updataList: [],
      headline: [
        "情感调频",
        "音乐故事",
        "声音恋人",
        "声之剧场",
        "脱口之秀",
        "侃侃而谈",
        "创作翻唱",
        "电音趴趴",
        "助眠解压",
        "你好爱豆",
        "叮叮铃声",
        "其他内容",
      ],
      playlistsRows: 9,
      playList: [
        {
          value: "精选",
          list: [],
        },
        {
          value: "火热",
          list: [],
        },
        {
          value: "伤感",
          list: [],
        },
        {
          value: "抒情",
          list: [],
        },
        {
          value: "舒畅",
          list: [],
        },
        {
          value: "热门",
          list: [],
        },
      ],
    };
  },
  mounted() {
    getNewestMV("内地", 10).then((res) => {
      const { data } = res;
      this.playList[1].list = data.data;
    }),
      getNewestMV("港台", 10).then((res) => {
        const { data } = res;
        this.playList[0].list = data.data;
      });
    getNewestMV("欧美", 10).then((res) => {
      const { data } = res;
      this.playList[2].list = data.data;
    });
    getNewestMV("日本", 10).then((res) => {
      const { data } = res;
      this.playList[4].list = data.data;
    });
    getNewestMV("韩国", 10).then((res) => {
      const { data } = res;
      this.playList[3].list = data.data;
    });
    getNewestMV("", 10).then((res) => {
      const { data } = res;
      this.playList[5].list = data.data;
    });
  },
  methods: {
    goPodcastView(index) {
      switch (index) {
        case 0:
          getRecommendMv("内地", 1, 6).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 1:
          getRecommendMv("内地", 2, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
        this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 2:
          getRecommendMv("内地", 3, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
             this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 3:
          getRecommendMv("内地", 4, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
             this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 4:
          getRecommendMv("内地", 5, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
             this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 5:
          getRecommendMv("内地", 6, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 6:
          getRecommendMv("内地", 7, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
             name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 7:
          getRecommendMv("内地", 8, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 8:
          getRecommendMv("内地", 9, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
            name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 9:
          getRecommendMv("内地", 10, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
             name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 10:
          getRecommendMv("内地", 11, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
             name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
        case 11:
          getRecommendMv("内地", 12, 3).then((res) => {
            const { data } = res;
            this.updataList = data.data;
            this.$router.push({
              name: "podcastView",
              params: {
                headline: this.headline[index],
                playList: this.playList,
                updataList: this.updataList,
              },
            });
          });
          break;
      }
    },
  },
};
</script>

<style scoped>
#classify {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#classify .iconList {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}
#classify .iconList > div {
  width: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#classify .iconList > div > svg {
  width: 30px;
  height: 30px;
}
</style>